<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级搜索框</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#60A5FA',
                        neutral: '#F3F4F6',
                        dark: '#1E3A8A',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .search-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .search-input-focus {
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-inter">
    <!-- 页面头部 -->
    <header class="bg-white shadow-sm py-6">
        <div class="container mx-auto px-4 md:px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">
                        <i class="fa-solid fa-search text-primary mr-2"></i>
                        SearchHub
                    </h1>
                    <p class="text-gray-500 mt-1">快速找到你需要的一切</p>
                </div>
                
                <!-- 主搜索框 -->
                <div class="w-full md:w-auto flex-grow md:max-w-2xl">
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                            <i class="fa-solid fa-magnifying-glass text-gray-400"></i>
                        </div>
                        <input type="text" 
                               id="main-search" 
                               class="w-full pl-12 pr-32 py-3.5 rounded-full border border-gray-200 focus:border-primary focus:outline-none focus:search-input-focus transition-all duration-300 text-gray-800 placeholder-gray-400 search-shadow"
                               placeholder="搜索产品、文章、教程..."
                               autocomplete="off">
                        <button id="search-btn" 
                                class="absolute inset-y-0 right-0 bg-primary hover:bg-dark text-white font-medium py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 flex items-center">
                            <span>搜索</span>
                            <i class="fa-solid fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                    
                    <!-- 搜索建议下拉框 -->
                    <div id="search-suggestions" class="hidden absolute top-full left-0 right-0 mt-2 bg-white rounded-xl shadow-lg overflow-hidden z-10 border border-gray-100 transition-all duration-300 transform origin-top scale-y-95 opacity-0">
                        <div class="p-4 border-b border-gray-100">
                            <p class="text-sm font-medium text-gray-500">热门搜索</p>
                        </div>
                        <ul class="divide-y divide-gray-100">
                            <li>
                                <a href="#" class="block px-4 py-3 hover:bg-gray-50 transition-colors duration-200 flex items-center">
                                    <i class="fa-solid fa-code text-primary mr-3"></i>
                                    <span>Web开发教程</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="block px-4 py-3 hover:bg-gray-50 transition-colors duration-200 flex items-center">
                                    <i class="fa-solid fa-paint-brush text-primary mr-3"></i>
                                    <span>UI设计资源</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="block px-4 py-3 hover:bg-gray-50 transition-colors duration-200 flex items-center">
                                    <i class="fa-solid fa-mobile text-primary mr-3"></i>
                                    <span>移动应用开发</span>
                                </a>
                            </li>
                        </ul>
                        <div class="p-3 text-center bg-gray-50">
                            <a href="#" class="text-primary text-sm hover:underline">查看更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 md:px-6 py-8">
        <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">搜索框特性</h2>
            <ul class="space-y-3">
                <li class="flex items-start">
                    <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                    <span>现代设计风格，圆角与阴影效果</span>
                </li>
                <li class="flex items-start">
                    <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                    <span>响应式布局，适配各种设备</span>
                </li>
                <li class="flex items-start">
                    <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                    <span>精美的悬停和焦点状态动画</span>
                </li>
                <li class="flex items-start">
                    <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                    <span>搜索建议下拉菜单</span>
                </li>
                <li class="flex items-start">
                    <i class="fa-solid fa-check-circle text-green-500 mt-1 mr-3"></i>
                    <span>平滑的过渡效果</span>
                </li>
            </ul>
        </div>

        <!-- 搜索结果预览 -->
        <section class="mb-10">
            <h2 class="text-xl font-semibold text-gray-800 mb-6">搜索结果预览</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100">
                    <img src="https://picsum.photos/400/200?random=1" alt="搜索结果图片" class="w-full h-48 object-cover">
                    <div class="p-5">
                        <h3 class="font-medium text-gray-900 mb-2">如何构建响应式网站</h3>
                        <p class="text-gray-600 text-sm mb-4">学习使用现代前端技术构建自适应各种设备的网站</p>
                        <a href="#" class="text-primary hover:text-dark text-sm font-medium flex items-center">
                            查看详情
                            <i class="fa-solid fa-arrow-right ml-2 text-xs"></i>
                        </a>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100">
                    <img src="https://picsum.photos/400/200?random=2" alt="搜索结果图片" class="w-full h-48 object-cover">
                    <div class="p-5">
                        <h3 class="font-medium text-gray-900 mb-2">JavaScript高级特性</h3>
                        <p class="text-gray-600 text-sm mb-4">深入理解JavaScript的闭包、Promise和异步编程</p>
                        <a href="#" class="text-primary hover:text-dark text-sm font-medium flex items-center">
                            查看详情
                            <i class="fa-solid fa-arrow-right ml-2 text-xs"></i>
                        </a>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100">
                    <img src="https://picsum.photos/400/200?random=3" alt="搜索结果图片" class="w-full h-48 object-cover">
                    <div class="p-5">
                        <h3 class="font-medium text-gray-900 mb-2">CSS动画效果实战</h3>
                        <p class="text-gray-600 text-sm mb-4">创建流畅的交互动画和过渡效果提升用户体验</p>
                        <a href="#" class="text-primary hover:text-dark text-sm font-medium flex items-center">
                            查看详情
                            <i class="fa-solid fa-arrow-right ml-2 text-xs"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10">
        <div class="container mx-auto px-4 md:px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-xl font-bold mb-2">SearchHub</h3>
                    <p class="text-gray-400 text-sm">强大而美观的搜索体验</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                        <i class="fa-brands fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                        <i class="fa-brands fa-github"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                        <i class="fa-brands fa-linkedin"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                <p>© 2025 SearchHub. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <script>
        // 搜索框交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('main-search');
            const searchBtn = document.getElementById('search-btn');
            const suggestionsBox = document.getElementById('search-suggestions');
            
            // 显示搜索建议
            searchInput.addEventListener('focus', function() {
                suggestionsBox.classList.remove('hidden');
                setTimeout(() => {
                    suggestionsBox.classList.remove('scale-y-95', 'opacity-0');
                    suggestionsBox.classList.add('scale-y-100', 'opacity-100');
                }, 10);
            });
            
            // 点击其他区域隐藏搜索建议
            document.addEventListener('click', function(event) {
                if (!searchInput.contains(event.target) && !suggestionsBox.contains(event.target)) {
                    suggestionsBox.classList.add('scale-y-95', 'opacity-0');
                    setTimeout(() => {
                        suggestionsBox.classList.add('hidden');
                    }, 200);
                }
            });
            
            // 搜索按钮动画
            searchBtn.addEventListener('mousedown', function() {
                this.classList.add('scale-95');
            });
            
            searchBtn.addEventListener('mouseup', function() {
                this.classList.remove('scale-95');
            });
            
            // 模拟搜索功能
            function performSearch() {
                const searchValue = searchInput.value.trim();
                if (searchValue) {
                    alert(`搜索内容: ${searchValue}\n在实际应用中，这里会执行搜索请求`);
                } else {
                    alert('请输入搜索内容');
                }
            }
            
            searchBtn.addEventListener('click', performSearch);
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });
        });
    </script>
</body>
</html>
    